<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>列表学生</title>
    <%--1. 引入jquery--%>
    <script src="webjars/jquery/3.6.1/dist/jquery.min.js"></script>
    <%--2. 引入boostrap的css样式--%>
    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/dist/css/bootstrap.min.css">
    <%--3. 引入bootstrap的js库--%>
    <script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.min.js"></script>

    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
<%--                <a class="btn btn-success" style="float: right" href="${pageContext.request.contextPath}/addpre">新增</a>--%>
                <h3>学生列表</h3>

            </h3>
        </div>
        <table class="table  table-striped table-hover">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>爱好</td>
                <td>班级</td>
                <td>联系方式</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${students}" var="stud">
                <tr>
                    <td>${stud.id}</td>
                    <td>${stud.name}</td>
                    <td>${stud.age}</td>
                    <td>${stud.habby}</td>
                    <td>${stud.classname}</td>
                    <td>${stud.phone}</td>
                    <td>
                        <a href="#" onclick="modify(${stud.id},'${stud.name}',${stud.age},'${stud.habby}','${stud.classname}','${stud.phone}')" class="btn btn-success btn-sm">修改</a>
                        <a href="${pageContext.request.contextPath }/del?id=${stud.id}" class="btn btn-danger btn-sm" >删除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <div class="panel-footer text-right">
            <form class="form-inline" style="float:left;margin-top: 10px;" name="form1" action="${pageContext.request.contextPath}/stupage"  method="post">
                <input type="hidden" name="pageNo" id="pageNo">
                <div class="form-group">
                    <input type="text" class="form-control" name="name" value="${pagename}" placeholder="输入姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="age" value="${pageage}" placeholder="输入年龄">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
                <button type="button" class="btn btn-primary"  onclick="showtab()">添加</button>
            </form>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:forEach begin="1" end="${nowPage}" var="p">
                    <li><a href="#" onclick="choosePage(${p})">${p}</a></li>
                    </c:forEach>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" name="showTab()" id="formtab">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="title">添加学生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" name="form2" action="${pageContext.request.contextPath }/add" method="post">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" class="form-control" name="id" id="id" placeholder=""  >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label" >姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="name" id="name" placeholder="" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="age" id="age" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">爱好</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="habby" id="habby" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="classname" id="classname" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary"  onclick="save()">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
<script>
    function choosePage(i) {

        $("#pageNo").val(i);
        document.form1.submit();

    }
    function showtab() {
        $("#title").html("添加学生")
        document.form2.reset();
        $("#formtab").modal("show")
    }
    function save() {
        var id = $("#id").val()
        console.log(id)
        if(id){
            document.form2.action="/modify"
        }
        document.form2.submit();
    }

    function modify(id,name,age,habby,classname,phone) {
        $("#id").val(id);
        $("#name").val(name);
        $("#age").val(age);
        $("#habby").val(habby);
        $("#classname").val(classname);
        $("#phone").val(phone);
        $("#title").text("修改学生")
        console.log("234")
        $("#formtab").modal("show")
    }

</script>
</html>